<template>
  <div class="home">
    <ul class="oul">
      <li v-for="(item, index) in icon" v-show="item.my" :key="index">
        <van-icon :name="item.icon" />
        <p v-if="item.icon === 'setting-o'" @click="setting">
          {{ item.icon }}
        </p>
        <p v-else>
          {{ item.icon }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Home',
  computed: {
    ...mapState(['icon'])
  },
  methods: {
    ...mapActions(['init']),
    setting() {
      this.$router.push('/about')
    }
  },
  created() {
    if (this.icon.length <= 0) {
      this.init()
    }
  }
}
</script>

<style scoped>
.oul {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.oul li {
  width: 25%;
}

li i {
  font-size: 26px;
}
</style>
